import { observer } from 'mobx-react-lite'
import { useEffect, useState } from 'react'
import * as Cesium from 'cesium'

const GAmap = observer((props: any) => {
	useEffect(() => {
		const viewer: any = new Cesium.Viewer(props.containerID, {
			shouldAnimate: false,
			selectionIndicator: false,
			vrButton: false,
			animation: false, //左下角的动画仪表盘
			baseLayerPicker: false, //右上角的图层选择按钮
			geocoder: false, //搜索框
			homeButton: false, //home按钮
			sceneModePicker: false, //模式切换按钮
			timeline: false, //底部的时间轴
			navigationHelpButton: false, //右上角的帮助按钮，
			fullscreenButton: false, //右下角的全屏按钮
			infoBox: false,
			// baseLayer: new Cesium.ImageryLayer(
			//   new Cesium.TileMapServiceImageryProvider({
			//     url: tilesetUrl + '/tiles/{z}/{x}/{y}.jpg',
			//     fileExtension: 'jpg',
			//     maximumLevel: 16,
			//   } as any),
			//   {},
			// ),
			// baseLayer:
			//   mapDimension == '3'
			//     ? undefined
			//     : new Cesium.ImageryLayer(
			//         new Cesium.TileMapServiceImageryProvider({
			//           url: tilesetUrl + '/2dmap1/{z}/{x}/{y}.png',
			//           fileExtension: 'png',
			//           // url: tilesetUrl + '/2d-map/{z}/{x}/{y}.jpg',
			//           // url: tilesetUrl + '/tiles/{z}/{x}/{y}.jpg',
			//           // url: tilesetUrl + '/two-dimension/{z}/{x}/{y}.png',
			//           // fileExtension: 'jpg',
			//           // maximumLevel: 16,
			//         } as any),
			//         {} as any,
			//       ),
		})
	}, [props.containerID])
})

export default GAmap
